.vditor {
    border: none;

    &--fullscreen {
        .vditor-toolbar {
            position: initial;
            width: 100%;
        }

        .vditor-wysiwyg {
            .vditor-reset {
                overflow: auto !important;
            }
        }

    }

    &-content {
        z-index: 0;
    }

    &-toolbar {
        padding: 2px 10px !important;
        border-bottom: 0;
        box-shadow: 0 4px 7px -3px rgba(0, 0, 0, .25);

        &__item {
            padding: 0 4px;
            zoom: 1.15;

            svg {
                height: 17px;
                width: 12px;
            }

            button[data-type="strike"] svg {
                width: 14px;
            }

            button[data-type="link"] svg {
                width: 13px;
            }

            button[data-type="list"] svg {
                width: 13px;
            }

            button[data-type="ordered-list"] svg {
                width: 13px;
            }

            button[data-type="check"] svg {
                width: 14px;
                height: 15px;
            }

            button[data-type="outdent"] svg {
                width: 14px;
            }

            button[data-type="indent"] svg {
                width: 14px;
            }

            button[data-type="quote"] svg {
                width: 14px;
            }

            button[data-type="line"] svg {
                width: 14px;
            }

            button[data-type="inline-code"] svg {
                width: 14px;
            }

            button[data-type="code"] svg {
                width: 14px;
            }

            button[data-type="insert-before"] svg {
                width: 12px;
            }

            button[data-type="insert-after"] svg {
                width: 12px;
            }

            div[data-type="upload"] svg {
                width: 14px;
            }

            button[data-type="table"] svg {
                width: 14px;
            }

            button[data-type="undo"] svg {
                width: 14px;
            }

            button[data-type="redo"] svg {
                width: 14px;
            }
        }
    }

    &-wysiwyg {
        .vditor-reset {
            min-height: calc(100vh - 170px);
            overflow: initial;
        }

        &__block[data-type="code-block"] .vditor-wysiwyg__pre code {
            white-space: pre;
            word-break: initial;
        }

        &__block[data-type="code-block"] .vditor-wysiwyg__preview {
            margin-top: 1.5em;
        }

        &__block:before,
        &__block[data-type="code-block"]:before {
            font-size: 11px !important;
            margin-top: 8px !important;
        }

        &:hover {
            .vditor-panel {
                opacity: 0.9;
            }
        }

        .vditor-panel {
            opacity: 0;
            transition: opacity 0.2s, top 0.1s;
            background-color: #f8f8f8;

            .vditor-input {
                background-color: #f8f8f8;
            }
        }

        .vditor-toc:before,
        div[data-type="footnotes-block"]:before,
        div[data-type="link-ref-defs-block"]:before {
            margin-top: 3px;
        }
    }

    &-preview {
        background-color: #fff;

        &__action {
            display: none;
        }

        pre code {
            transition: opacity 0.3s;
            opacity: 0;

            &.hljs {
                opacity: 1;
            }
        }
    }

    &-wysiwyg,
    &-preview {

        .vditor-reset {
            padding: 20px 35px !important;

            &:focus {
                background-color: #fff !important;
            }

            h1:hover:before,
            h2:hover:before,
            h3:hover:before,
            h4:hover:before,
            h5:hover:before,
            h6:hover:before,
            talbe:hover:before,
            .vditor-wysiwyg__block:hover:before,
            .vditor-wysiwyg__block[data-type="code-block"]:hover:before {
                opacity: 1;
            }

            h1:before,
            h2:before,
            h3:before,
            h4:before,
            h5:before,
            h6:before,
            talbe:before,
            .vditor-wysiwyg__block:before,
            .vditor-wysiwyg__block[data-type="code-block"]:before {
                opacity: 0;
                transition: opacity 0.2s;
            }

            h1:before {
                margin-top: 9px;
            }

            h2:before {
                margin-top: 7px;
            }

            h3:before {
                margin-top: 5px;
            }

            h4:before {
                margin-top: 3px;
            }

            h5:before {
                margin-top: 1px;
            }

            h6:before {
                margin-top: 0px;
            }

            table {
                font-size: 14px;
                display: block;
            }

            .vditor-task {
                word-break: break-all;
            }
        }
    }

    .vditor-outline {
        border-left: 1px solid $--color-primary-light-9;
        width: 200px;

        &__content {
            position: sticky;
            top: 0;
            overflow-y: auto;
            padding: 10px 0;
            font-size: 13px;

            .vditor-outline__item {
                padding: 0 15px;
                margin: 12px 0;
                color: $--color-primary-light-4;

                &:hover {
                    background: none;
                    color: $--color-primary-light-1;
                }

                &--current {
                    color: $--color-primary-light-1;
                }
            }
        }

        &__title {
            display: none;
        }

    }

}